<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            /* 弹性盒子，为了让子元素横向排列 */
            display: flex;
            background-image: url(../img/10014.png);
            background-position: center top;
        }
        
        .navbar {
            width: 120px;
            height: 40px;
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 40px;
            /* 文字颜色 */
            color: aliceblue;
            /* 背景颜色渐变 */
            background: radial-gradient(rgba(0, 0, 255, 1), rgba(192, 192, 214, 0.189));
            margin: 5px;
            /* 父元素相对位置 */
            position: relative;
        }
        
        .tri {
            /* 三角小 */
            width: 0;
            height: 0;
            border: 5px solid firebrick;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            /* 定位 */
            position: absolute;
            bottom: -5px;
            left: 50%;
            margin-left: -5px;
            /* 隐藏 */
            display: none;
        }
        
        .navbar:hover .tri {
            /* 显示 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="nav">
        <!-- <div class="navbar"><img src="../img/10014.png" alt="背景地图"></div> -->
        <div class="navbar">首页
            <div class="tri"></div>
        </div>
        <div class="navbar">地图操作
            <div class="tri"></div>
        </div>
        <div class="navbar">官网查询
            <div class="tri"></div>
        </div>
        <div class="navbar">官网统计
            <div class="tri"></div>
        </div>
        <div class="navbar">巡检查询
            <div class="tri"></div>
        </div>
        <div class="navbar">抢修养护
            <div class="tri"></div>
        </div>
        <div class="navbar">图档管理
            <div class="tri"></div>
        </div>
        <div class="navbar">企业管理
            <div class="tri"></div>
        </div>
        <div class="navbar">官网统计
            <div class="tri"></div>
        </div>
        <div class="navbar">泵站管理
            <div class="tri"></div>
            <div class="father">
                <div class="son1">抢修养护计划</div>
                <div class="son2">抢修养护计划详情</div>

            </div>
        </div>
    </div>
</body>

</html>